
$compay: #E5ECFF;
$self: #FBEEE8;
$procure: #E0F7FF;
$compay-color: #435BA1;
$self-color: #9B583D;
$procure-color: #366F83;
.nt-submit{
	padding: 0 0 150rpx;
	box-sizing: border-box;
	overflow-x: hidden;
	/deep/ .plan-class{
		font-size: 26rpx;
		color:#666;
	}
	/deep/ .nt-title{
		position: relative;
	}
	.flex{
		display:flex;
	}
	.tip{
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		
	}
	.cost{
		font-weight: bold;
		color: var(--theme-color);
		font-size: 32rpx;
	}
	.tip{
		font-size: 24rpx;
		color: #aaa;
	}
	.gap{
		height: 10rpx;
		background: #F2F4F6;
	}
	
	.company{
		background: $compay ;
		color: $compay-color;
		&::after{
			background: $compay-color;
		}
	}
	.self{
		background: $self;
		color: $self-color;
		&::after{
			background: $self-color;
		}
	}
	.procure{
		background: $procure;
		color: $procure-color;
		&::after{
			background: $procure-color;
		}
	}
	.btn{
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color:#fff;
		border-radius: 50%;
		text-align:center;
		&.add{
			background: var(--theme-color)
		}
		&.reduce{
			background: #333333;
		}
	}
	.clear-btn{
		background: #f00;
		color: #fff;
		padding: 10rpx 14rpx;
		font-size: 24rpx;
	}
	.switch{
		display:flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color:#666;
		&-text{
			margin: 0 10rpx;
			&.active{
				color:var(--theme-color)
			}
		}
	}
	.back{
		&-list{
			&__item{
				display:flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				padding: 15rpx 10rpx;
				box-sizing: border-box;
				color:#666;
				text-align: center;
				.weight{
					font-weight: bold;
					color:#333;
				}
				&--type{
					width: 150rpx;
				}
				&--name{
					flex: 1;
				}
				&--number{
					width: 160rpx;
				}
				&--price{
					width: 160rpx;
				}
				&--price, &--name, &--number{
					/deep/.u-input{
						border: none !important;
						padding: 0 !important;
						text-align: center;
					}
				}
				&--btn{
					width: 60rpx;
					&-b, &-r{
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 50%;
						text-align: center;
						font-size: 40rpx;
						font-weight: bold;
						color:#fff;
						
					}
					&-b{
						background: var(--theme-color);
					}
					&-r{
						background: #333;
					}
				}
				
			}
		}
	}
	.iconfont{
		font-size: 30rpx;
		vertical-align: middle;
	}
	.parts{
		&-list{
			&__item{
				display:flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 20rpx;
				&--content{
					height: 56rpx;
					background:#fff;
					border-radius: 10rpx;
					flex: 1;
					display:flex;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					.empty{
						color:#999
					}
					/deep/ .u-input{
						border:none !important;
						padding: 0 !important;
						text-align: center !important;
					}
					&-type{
						// width: 100rpx;
						flex: 1;
						color:#333;
					}
					&-name{
						// width: 100rpx;
						flex: 1;
					}
					&-number{
						width: 100rpx;
					}
					&-price{
						width: 100rpx;
						text-align: center;
					}
				}
				&--btn{
					width:40rpx;
					height: 40rpx;
					line-height: 40rpx;
					margin-left: 20rpx;
					border-radius: 50%;
					background:#333;
					text-align: center;
					font-weight: bold;
					color:#fff;
				}
			}
		}
	}
	&-item{
		&.parts{
			padding: 0 20rpx;
			margin: 0 -20rpx;
		}
		&.border{
			border-bottom: 1rpx solid #eee;
		}
		&.pad_lr{
			padding: 0 20rpx;
		}
		&.pad_tb{
			padding: 25rpx 0
		}
		&.pad{
			padding: 25rpx;
		}
		&.flex{
			display:flex;
			align-items: center;
		}
		&.flex-start{
			align-items: flex-start;
		}
		&__table{
			display: table;
			width: 100%	
		}
		&__row{
			display:flex;
			justify-content: space-between;
			align-items: center;
			&.pad_lr{
				padding: 0 20rpx;
			}
		}
		&__body{
			// display: table-column-group;
		}
		&__cell{
			// display: table-cell;
			flex: auto;
			text-align: left;
			padding: 20rpx 2rpx;
			font-size: 20rpx;
			color: #ccc;
			&.weight{
				color:#333;
				font-weight: bold;
			}
		}
		&__cell1{
			width: 230rpx;
		}
		&__cell2{
			width: 80rpx;
			text-align: right;
		}
		&__label{
			width: 200rpx;
			white-space: nowrap;
			color: #333;
			font-size: 28rpx;
			&.required{
				&::before{
					content: "*";
					display:inline-block;
					vertical-align: middle;
					color:#f00;
				}
			}
		}
		&__type{
			color: #333;
			&--label{
				font-size: 24rpx;
			}
			&--list{
				display:flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
			}
			&--item{
				width: 200rpx;
				height: 70rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				display:flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				&::after{
					content: "+";
					border-radius: 50%;
					text-align: center;
					color:#fff;
					display:flex;
					align-items: center;
					justify-content: center;
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
					color:#fff;
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}
		&__procure{
			display:flex;
			align-items: center;
		}
		&__content{
			flex: 1;
			/deep/ .u-radio {
				&__text{
					color: #333;
					font-size: 28rpx;
				}
				& + .u-radio{
					margin-left: 90rpx;
				}
			}
			&--select{
				font-size: 28rpx;
				color: #ccc;
				display: flex;
				justify-content: space-between;
			}
		}
		&__invoice{
			flex: 1;
			color: #333;
			font-size: 28rpx;
			margin-bottom:  20rpx;
			min-height: 65rpx;
			&.flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			&--input{
				margin-top: 20rpx;
				flex: 1;
				&.no-margin{
					margin: 0;
				}
			}
			&--desc{
				font-size: 20rpx;
				color:#999;
			}
			&--label{
				font-size: 30rpx;
				color:#333;
				&.width_150{
					width: 150rpx;
				}
				text{
					color:#f00;
				}
			}
			input{
				width: 300rpx;
				height: 65rpx;
				border-radius: 10rpx;
				border:1rpx solid #ccc;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			/deep/ .placeholder-class{
				font-size: 24rpx;
				color: #aaa;
			}
			/deep/ .u-textarea{
				background: #F2F4F6
			}
		}
		&__evaluate{
			&--list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			&--item{
				width: 48%;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #CCCCCC;
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				height: 120rpx;
				color: #333;
				&.active{
					color:#fff;
					background: var(--theme-color);
					color: #fff;
				}
				&--item:nth-child(2n){
					margin-left: 4%;
				}
				&-title{
					font-size: 24rpx;
					font-weight: bold;
				}
				&-desc{
					font-size: 20rpx;
					margin-top: 10rpx;
				}
			}
		}
		&__upload{
			padding: 40rpx 10rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
			&--title{
				font-size: 24rpx;
				color: #aaa;
				margin-bottom: 20rpx;
				text{
					color: var(--theme-color)
				}
			}
		}
		&__header &__cell{
			font-weight: bold;
			color:#333;
			font-size: 24rpx;
		}
	}
	&-footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		background:#fff;
		padding: 0 70rpx;
		z-index: 9;
		box-sizing: border-box;
		display:flex;
		align-items: center;
		/deep/ .button-container{
			width: 100%;
		}
	}
}